<template>
  <div class="wrap">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="item.id"
        @click="GoTo(item, index)">
        <p>{{ item.title }}</p>
      </li>
    </ul>
  </div>
  <router-view></router-view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "月半小夜曲",
        },
        {
          id: 2,
          title: "红日",
        },
        {
          id: 3,
          title: "深深深",
        },
        {
          id: 4,
          title: "护花使者",
        },
      ],
      nameSong: ["yuebanxiaoyequ", "hongri", "shenshenshen", "huhuashizhe"],
    };
  },
  methods: {
    GoTo(item, index) {
      console.log("点击详情");
      // console.log(index);
      // console.log(this.nameSong[index]);
      // console.log(item.id);
      this.$router.push({
        name: this.nameSong[index].toString(),
        params: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style scoped>
ul,
li {
  list-style: none;
}
.wrap,
.wrap > ul {
  width: 100%;
  height: 100%;
}
li {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  background-color: rosybrown;
}
</style>
